<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>jquery_事件委托</title>
		<style type="text/css">
			#box{
				width: 400px;
				background: green;	
			}
			.a{
				width: 200px;
				height: 200px;
				background: red;
			}
			.b{
				width: 100px;
				height: 100px;
				background: yellow;
			}
		</style>
	</head>
<body>
  <div id="box">
    <div class="a">a的事件委托</div>
    <br />
    <br />
    <br />
    <div class="b">b的事件委托</div>
    <br />
    <br />
    <br />
  </div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

  //live在1.7以上已经废除了。
//  $('.a').live('click',function () {
//    alert('live');
//  });
//
//  delegate()
//  $('#box').delegate('.a','click',function () {
//      alert('delegate');
//  });


  $(function () {
    //使用delegate进行委托
    $('#box').delegate('.a','click',function () {
      alert('delegate 委托的事件')
    })
    //使用on进行事件委托
    $('#box').on('click','.a',function () {
      alert('on委托的事件')
    })
    $('#box').append(' <div class="a">a的事件委托</div>')
  })


</script>
</body>
</html>
